<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    let arrIMG = [
        {
            id: 1,
            imgUrl:'https://s.cn.bing.net/th?id=OHR.ManhattanAerial_ZH-CN0036686873_1920x1080.webp&qlt=50'
        },
        {
            id: 2,
            imgUrl:'https://s.cn.bing.net/th?id=OHR.ManhattanAerial_ZH-CN0036686873_1920x1080.webp&qlt=50'
        },
        {
            id: 3,
            imgUrl:'https://s.cn.bing.net/th?id=OHR.ManhattanAerial_ZH-CN0036686873_1920x1080.webp&qlt=50'
        }
    ]

    // function loadAllImg(arrIMG){
    //     arrIMG.forEach(element => {
    //         let img = new Image();
    //         img.src = element.imgUrl
    //         img.onload = function () {
    //             document.body.appendChild(img)
    //             console.log('img load');
    //         }
    //     });
    // }

    // loadAllImg(arrIMG)
    // console.log('fffffff');



    // function loadImage(url) {
    //     return new Promise((resolve, reject) => {
    //         const img = new Image();

    //         img.onload = () => {
    //             resolve(img);
    //         };

    //         img.onerror = (error) => {
    //             reject(new Error('Image load failed.'));
    //         };

    //         img.src = url;
    //     });
    // }

    // // 使用示例：
    // loadImage('https://s.cn.bing.net/th?id=OHR.ManhattanAerial_ZH-CN0036686873_1920x1080.webp&qlt=50')
    // .then((img) => {
    //     console.log(img,'Image loaded successfully.');
    //     // 在这里可以进行其他操作，例如显示图片等
    // })
    // .catch((error) => {
    //     console.error(error);
    //     // 处理加载失败的情况
    // });


    // async function loadAllImg(arrIMG){
    //     // return new Promise((res, rej) => {
    //         let resId;
    //         arrIMG.forEach(element => {
    //             let img = new Image();
    //             img.src = element.imgUrl
    //             img.onload = function () {
    //                 document.body.appendChild(img)
    //                 console.log('img load');
    //                 if(element.id === 3) {
    //                     resId = 3;
    //                     console.log(3333333333);
    //                     // res('loaded')
    //                 };
    //             }
    //         });
    //     // })

    //     return 'lllll'
    // }


    function loadAllImg(arrIMG){
        return new Promise((res, rej) => {
            let resId;
            arrIMG.forEach(element => {
                let img = new Image();
                img.src = element.imgUrl
                img.onload = function () {
                    document.body.appendChild(img)
                    console.log('img load');
                    if(element.id === 3) {
                        resId = 3;
                        console.log(3333333333);
                        res('loaded')
                    };
                }
            });
        })

    }

    loadAllImg(arrIMG).then(value => {
        console.log(value);
        console.log('fffffff');
    })



    


</script>
</html>